<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../../../scripts/jquery-1.11.3.min.js"></script>
    <script src="../../../scripts/lib/echarts/esl.js"></script>
    <script src="../../../scripts/lib/echarts/echarts.js"></script>
    <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5FnNQNGWXlHGq9nbLKLLAsdU"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
</head>
<body style="margin:0;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:100%;width:100%;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript">
// 路径配置
(function () {
    require.config({
        paths: {
            echarts: '../../../scripts/lib/echarts'
        },
        packages: [
        {
            name: 'BMap',
            location: '../../../scripts/lib/echarts',
            main: 'main'
        }
        ]
    });

    require(
        [
        'echarts',
        'BMap',
        'echarts/chart/map'
        ],
        function (echarts, BMapExtension) {
            var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
                enableMapClick: false
            });
            var map = BMapExt.getMap();
            var container = BMapExt.getEchartsContainer();
            var startPoint = {
                x: 103.398827,
                y: 23.363061
            };
            var point = new BMap.Point(startPoint.x, startPoint.y);
            map.centerAndZoom(point, 13);
            map.enableScrollWheelZoom(true);
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        // 地图自定义样式


        option = {
            color: ['gold','aqua','lime'],
            title : {
                //text: '业务态势',
                //subtext:'2016年6月7日 16:36:37',
                x:'center',
                y:50,
                textStyle : {
                    color: '#cc3300'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: function (v) {
                    return v[1].replace(':', ' > ');
                }
            },
            legend: {
                show:false,
                orient: 'vertical',
                x:'20',
                y:'20',
                data:['蒙自汽车客运站'],
                selectedMode: 'single',
                selected:{
/*                    '公安局' : false,
'卫生局' : false*/
},
textStyle : {
    color: '#cc3300'
}
},
dataRange: {
    min : 0,
    max : 100,
    range:{start: 20, end: 100},
    x: '96%',
    y:100,
    calculable : true,
    color: ['#ff3333', 'orange','lime'],
    textStyle:{
        color:'#fff'
    },
},
series : [
{
    name:'蒙自汽车客运站',
    type:'map',
    mapType: 'none',
    data:[],
    geoCoord: {
                        // '蒙自汽车客运站': [103.396492,23.397327],
                        '蒙自汽车客运站': [103.355421,23.383529],
                        '南湖公园': [103.407559,23.369365],
                        '红河体育馆': [103.397893,23.358715],
                        '机关幼儿园': [103.411296,23.358649],

                        '壮族中学': [103.427286,23.401042],
                        '红河学院': [103.432604,23.358052],

                        '大屯小学': [103.29448,23.410859],
                        '蒙自市政府': [103.370944,23.401307],
                        '和平小学': [103.402995,23.418685],
                    },
                    markLine : {
                        smooth:true,
                        effect : {
                            show: true,
                            scaleSize: 1,
                            period: 30,
                            color: '#fff',
                            shadowBlur: 10
                        },
                        itemStyle : {
                            normal: {
                                borderWidth:4,
                                lineStyle: {
                                    type: 'dotted',
                                    shadowBlur: 10
                                }
                            }
                        },
                        data : [
                        [{name:'蒙自汽车客运站'}, {name:'红河体育馆',value:20}],
                        [{name:'蒙自汽车客运站'}, {name:'壮族中学',value:80}]
                        ]
                    },
                    markPoint : {
                        symbol:'emptyCircle',
                        symbolSize : function (v){
                            return 10 + v/10
                        },
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        data : [
                        {name:'红河体育馆',value:20}
                        ]
                    }
                },
                {
                    name:'红河体育馆',
                    type:'map',
                    mapType: 'none',
                    data:[],
                    markLine : {
                        smooth:true,
                        itemStyle : {
                            normal: {
                                borderWidth:4,
                                lineStyle: {
                                    type: 'dotted',
                                    shadowBlur: 10
                                }
                            }
                        },
                        data : [
                        [{name:'红河体育馆'}, {name:'南湖公园',value:20}]
                        ]
                    },
                    markPoint : {
                        symbol:'emptyCircle',
                        symbolSize : function (v){
                            return 10 + v/10
                        },
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        data : [
                        {name:'南湖公园',value:20}
                        ]
                    }
                },
                {
                    name:'南湖公园',
                    type:'map',
                    mapType: 'none',
                    data:[],
                    markLine : {
                        smooth:true,
                        itemStyle : {
                            normal: {
                                borderWidth:4,
                                lineStyle: {
                                    type: 'dotted',
                                    shadowBlur: 10
                                }
                            }
                        },
                        data : [
                        [{name:'南湖公园'}, {name:'大屯小学',value:20}]
                        ]
                    },
                    markPoint : {
                        symbol:'emptyCircle',
                        symbolSize : function (v){
                            return 10 + v/10
                        },
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        data : [
                        {name:'机关幼儿园',value:20}
                        ]
                    }
                },
                /*begin*/
                {
                    name:'壮族中学',
                    type:'map',
                    mapType: 'none',
                    data:[],
                    markLine : {
                        smooth:true,
                        itemStyle : {
                            normal: {
                                borderWidth:4,
                                lineStyle: {
                                    type: 'dotted',
                                    shadowBlur: 10
                                }
                            }
                        },
                        data : [
                        [{name:'壮族中学'}, {name:'红河学院',value:80}]
                        ]
                    },
                    markPoint : {
                        symbol:'emptyCircle',
                        symbolSize : function (v){
                            return 10 + v/10
                        },
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        data : [
                        {name:'壮族中学',value:80}
                        ]
                    }
                },
                /*end*/
                /*begin*/
                {
                    name:'蒙自市政府',
                    type:'map',
                    mapType: 'none',
                    data:[],
                    markLine : {
                        smooth:true,
                        itemStyle : {
                            normal: {
                                borderWidth:4,
                                lineStyle: {
                                    type: 'dotted',
                                    shadowBlur: 10
                                }
                            }
                        },
                        data : [
                        [{name:'蒙自市政府'}, {name:'大屯小学',value:40}]
                        ]
                    },
                    markPoint : {
                        symbol:'emptyCircle',
                        symbolSize : function (v){
                            return 10 + v/10
                        },
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        data : [
                        {name:'蒙自市政府',value:40}
                        ]
                    }
                },
                /*end*/
                /*begin*/
                {
                    name:'大屯小学',
                    type:'map',
                    mapType: 'none',
                    data:[],
                    markLine : {
                        smooth:true,
                        itemStyle : {
                            normal: {
                                borderWidth:4,
                                lineStyle: {
                                    type: 'dotted',
                                    shadowBlur: 10
                                }
                            }
                        },
                        data : [
                        [{name:'大屯小学'}, {name:'和平小学',value:40}]
                        ]
                    },
                    markPoint : {
                        symbol:'emptyCircle',
                        symbolSize : function (v){
                            return 10 + v/10
                        },
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        data : [
                        {name:'大屯小学',value:40}
                        ]
                    }
                }
                /*end*/
                ]
            };

            var myChart = BMapExt.initECharts(container);
            BMapExt.setOption(option);
            window.onresize = myChart.resize
        }
        );
})();

</script>
</body>
</html>

